<!--
 * @Author: zjj
 * @Date: 2019-11-13 11:46:26
 * @LastEditors: zjj
 * @LastEditTime: 2019-12-08 17:19:39
 -->
<!--  -->
<template>
  <div class="cash-withdrawal">
    <Nav title="申请提现">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="wrapper">
      <div class="radio-wrapper flex aligin-center justify-center f-15">
        <div class="radio-item flex aligin-center" @click="radioSelect(0)">
          <div class="flex justify-center aligin-center" :class="radioIndex==0?'active':'common'">
            <span class="dot-active" v-if="radioIndex==0"></span>
          </div>
          <span class="ml-8">提现到微信账户</span>
        </div>
        <div class="line"></div>
        <div class="radio-item flex aligin-center" @click="radioSelect(1)">
          <div class="flex justify-center aligin-center" :class="radioIndex==1?'active':'common'">
            <span class="dot-active" v-if="radioIndex==1"></span>
          </div>
          <span class="ml-8">提现到支付宝</span>
        </div>
      </div>
      <div
        class="color-gray mt-20 text-center"
        @click="toAuthorization"
        v-if="radioIndex==0&&!accountInfo.account_number"
      >
        当前微信未授权提现功能，
        <span class="tip-color">点击一键授权</span>
      </div>
      <div class="pay-wrapper mt-20 flex justify-between aligin-center">
        <div>
          <div><span>提现金额</span><span class="fee">(手续费{{c_fee}}%)</span></div>
          <div class="mt-30 flex aligin-center">
            <span>￥</span>
            <van-field v-model="money" placeholder="请输入提现金额" type="number"/>
          </div>
          <div class="mt-20 color-gray">可提现金额￥{{accountInfo.user_money}}</div>
        </div>
        <span class="color-red" @click="allUp">全部提现</span>
      </div>
      <div class="alipay-wrapper mt-18" v-if="radioIndex==1">
        <div>支付宝账户</div>
        <van-field class="mt-20" v-model="tel" placeholder="请输入支付宝账号" type="tel"/>
      </div>
      <!-- 按钮 -->
      <div class="withdrawal_foot">
        <button class="withdrawal_btn btn_public" :class="[flag?'':'bg-gray']" @click="confirm">提现</button>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { withdrawDefault, withdrawSingle, weLogin } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      radioIndex: 0,
      money: "",
      tel: "",
      flag: true,
      accountInfo: {}
    };
  },
  computed: {
    c_fee(){
      return parseFloat(this.accountInfo.commission_fee)*100
    }
  },
  watch: {
    "$route"(newValue,oldValue) {
      withdrawDefault({ device_code: 1 }).then(({ data: { result } }) => {
        this.accountInfo = result;
        if (result.alipay_account) {
          this.tel = result.alipay_account;
        }
      });
    }
  },
  methods: {
    allUp() {
      this.money = this.accountInfo.user_money;
    },
    toAuthorization() {
      this.$dialog
        .confirm({
          message: "微信支付需要微信授权登入，请微信登入授权"
        })
        .then(() => {
          return weLogin({ from: "authorization" });
        })
        .then(res => {
          this.$set(this.accountInfo,"account_number","yes")
          window.location.href = res.data.result;
        });
    },
    radioSelect(index) {
      this.radioIndex = index;
    },
    // 提交
    confirm() {
      this.flag = false;
      if (!this.tel && this.radioIndex == 1) {
        this.$notify({
          message: "请输入支付宝账号",
          duration: 1000,
          background: "#ff0000"
        });
        this.flag = true;
        return;
      }
      if (!this.money) {
        this.$notify({
          message: "请输入提现金额",
          duration: 1000,
          background: "#ff0000"
        });
        this.flag = true;
        return;
      }
      let params = {
        id: this.accountInfo.id,
        money: this.money,
        bank_type: this.radioIndex == 0 ? 1 : 2
      };
      if (this.radioIndex == 1) {
        params = Object.assign({}, params, { alipay_account: this.tel });
      }
      withdrawSingle(params).then(
        res => {
          this.$notify({
            message: "提现成功",
            duration: 1000,
            background: "#1989fa"
          });
          setTimeout(() => {
            this.$router.back();
          }, 2000);
        },
        res => {
          this.flag = true;
        }
      );
    }
  },
  created() {},
  mounted() {
    withdrawDefault({ device_code: 1 }).then(({ data: { result } }) => {
      this.accountInfo = result;
      if (result.alipay_account) {
        this.tel = result.alipay_account;
      }
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.cash-withdrawal /deep/ .van-cell {
  padding: 0;
}
.cash-withdrawal {
  height: 100%;
  .wrapper {
    padding: 28px 16px 0;
    font-size: 13px;

    .f-15 {
      font-size: 15px;
    }
    .radio-wrapper {
      height: 75px;
      box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
      border-radius: 5px;
      .line {
        margin: 0 13px;
        width: 1px;
        height: 30px;
        background: #bcbcbc;
      }
      .active {
        width: 14px;
        height: 14px;
        border: 2px solid rgba(232, 50, 57, 1);
        border-radius: 50%;
      }
      .common {
        width: 14px;
        height: 14px;
        border: 2px solid rgba(188, 188, 188, 1);
        border-radius: 50%;
      }
      .dot-active {
        width: 7px;
        height: 7px;
        background: rgba(232, 50, 57, 1);
        border-radius: 50%;
      }
    }
    .tip-color {
      color: #03a6fb;
    }
    .text-center {
      text-align: center;
    }
    .pay-wrapper {
      font-size: 13px;
      padding: 0 23px 0 19px;
      height: 133px;
      box-sizing: border-box;
      box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
      border-radius: 5px;
      .fee{
        margin-left: 5px;
        color: rgba(232, 50, 57, 1);
      }
    }
    .withdrawal_foot {
      margin: 40px 15px 0 15px;
    }
    .alipay {
      margin-right: 15px;
      height: 36px;
      width: 36px;
      background: url("../../assets/imgs/alipay.png");
      background-size: 100% 100%;
    }
    .bg-gray {
      background: #ebebeb;
    }
    .alipay-wrapper {
      padding: 21px 0 22px 19px;
      height: 100px;
      box-sizing: border-box;
      box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
      border-radius: 5px;
    }
  }
}
</style>